<template>
  <div class="user-info">
    <input type="file" style="display: none" ref="fileTag" @change="selEnd" />
    <img :src="dalImg(imgUrl)" alt="" @click="selImg" />
    <input
      class="txt"
      type="text"
      v-model="nickname"
      placeholder="请输入昵称"
    />
    <!-- <input
      class="txt"
      type="text"
      v-model="password"
      placeholder="修改密码"
    /> -->
    <Button
      type="success"
      style="width: 84%; margin-left: 8%; border-radius: 20px; margin-top: 50px"
      @click="saveHandle"
      >保存</Button
    >
    <Button
      type="danger"
      style="width: 84%; margin-left: 8%; border-radius: 20px; margin-top: 20px"
      @click="loginout"
      >退出登录</Button
    >
  </div>
</template>
<script setup>
import { Button } from "vant";
import { ref } from "vue";
import { dalImg } from "../utils/tools";
import { useRouter } from "vue-router";
import { removeToken } from "../utils/tools";
import axios from "../utils/request";
import { loadUserInfoAPI, modifyUserInfoAPI } from "../services/shop";
const userInfo = ref({});
const nickname = ref("");
const fileTag = ref();
const imgUrl = ref("");
const { push } = useRouter();
const router = useRouter();
loadUserInfoAPI().then((res) => {
  userInfo.value = res.data;
  imgUrl.value = res.data.coverImage;
  nickname.value = res.data.nickname;
});
const saveHandle = () => {
  if (nickname.value) {
    modifyUserInfoAPI({ nickname: nickname.value, avatar: imgUrl.value }).then(() => {
        router.replace({ name: "User" });
      }
    );
  } else {
    alert("请输入昵称");
  }
};
const selImg = () => {
  fileTag.value.click();
};
const selEnd = () => {
  console.log(fileTag.value.files);
  const formData = new FormData();
  formData.append("file", fileTag.value.files[0]);
  axios.post("/api/member/upload/avatar", formData).then((res) => {
    imgUrl.value = res.data;
    console.log(imgUrl.value);
  });
};
const loginout = () => {
  removeToken();
  push({
    name: "Login",
  });
};
</script>

<style scoped>
.user-info {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.user-info img {
  width: 30vw;
  height: 30vw;
  border-radius: 50%;
  display: block;
  margin: 8px auto;
}
.txt {
  display: block;
  margin: 16px auto;
  width: 80vw;
  /* font-size: 1.2rem; */
  padding: 8px;
  border: none;
  outline: none;
  box-shadow: 0 1px 0 #993366;
}
</style>
